<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="../../../node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="../../../node_modules/markdown-it-attrs/markdown-it-attrs.browser.js"></script>
<div id="markdownbox"></div>
<script>
  var md = window.markdownit();


  md.use(
    window.markdownItAttrs,
    {
      // optional, these are default options
      leftDelimiter: '{',
      rightDelimiter: '}',
      allowedAttributes: []  // empty array = all attributes are allowed
    }
  )

  const text1 =
`# header {.style-me}
paragraph {data-toggle=modal}`;
/* 输出为:
<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
*/

  const text2 =
`paragraph *style me*{.red} more text`;
/* 输出为:
<p>paragraph <em class="red">style me</em> more text</p>
*/

  const text3 =
`\`\`\`python {data=asdf}
nums = [x for x in range(10)]
\`\`\``;
/* 输出为:
<pre><code data="asdf" class="language-python">
nums = [x for x in range(10)]
</code></pre>
*/

  const text4 =
`\`\`\`python {data=asdf}
nums = [x for x in range(10)]
\`\`\``;
  /* 输出为:
  <pre><code data="asdf" class="language-python">
  nums = [x for x in range(10)]
  </code></pre>
  */

  const text5 =
`Use the css-module green on this paragraph. {..green}`;
/* 输出为:
<p css-module="green">Use the css-module green on this paragraph.</p>
*/

  //Also works with spans, in combination with the markdown-it-bracketed-spans plugin (to be installed and loaded as such then):
  const text6 =
`paragraph with [a style me span]{.red}`;
/* 输出为:
<p>paragraph with <span class="red">a style me span</span></p>
*/

  var result = md.render(text5);


  console.log('result:',result);
  markdownbox.innerHTML = result;
</script>
</body>
</html>
